<template>
  <div class="mainBox">
    <div class="routerMsg">{{ routerMsg }}</div>
    <div class="container">
      <div class="searchBox">
        <div class="searchBoxTop">
          <div class="search1">
            <el-input
              placeholder="企业名称"
              v-model="searchObj.enterpriseName"
              prefix-icon="el-icon-search"
              style="width: 197px"
            >
            </el-input>
          </div>

          <div class="search1">
            <el-select
              clearable
              ref="optionRef1"
              v-model="subAlarmData.industryCategory"
              placeholder="应急场景"
              style="width: 187px"
            >
              <el-option
                v-for="item in emergencySceneCodeList"
                :key="item.id"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </div>

          <div class="search1">
            <el-input
              v-model="searchObj.targetCode"
              placeholder="请输入指标名称"
              style="width: 135px"
            ></el-input>
          </div>

          <div class="search1">
            <el-input
              v-model="searchObj.equipCode"
              placeholder="请输入设备名称"
              style="width: 135px"
            ></el-input>
          </div>

          <div class="search1">
            <el-select
              clearable
              ref="optionRef2"
              v-model="subAlarmData.alarmGrade"
              placeholder="报警等级"
              style="width: 135px"
            >
              <el-option
                v-for="item in levalDictList"
                :key="item.id"
                :label="item.dictName"
                :value="item.dictCode"
              ></el-option>
            </el-select>
          </div>

          <div class="search1">
            <el-select
              clearable
              ref="optionRef3"
              v-model="value"
              placeholder="是否已处置"
              style="width: 135px"
            >
              <el-option
                v-for="item in isDictList"
                :key="item.id"
                :label="item.dictName"
                :value="item.dictCode"
              ></el-option>
            </el-select>
          </div>
          <div class="search1">
            <el-input
              v-model="searchObj.alarmReason"
              placeholder="报警原因"
              style="width: 347px"
            ></el-input>
          </div>
        </div>

        <div class="searchBoxBottom">
          <div class="timeBlock">
            <el-date-picker
              prefix-icon="el-icon-arrow-down"
              v-model="timeValue1"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="处置时间"
              end-placeholder="处置时间"
              style="width: 375px"
            >
            </el-date-picker>
          </div>
          <div class="timeBlock">
            <el-date-picker
              prefix-icon="el-icon-arrow-down"
              v-model="timeValue2"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="报警起始时间"
              end-placeholder="报警起始时间"
              style="width: 375px"
            >
            </el-date-picker>
          </div>
          <div class="timeBlock">
            <el-date-picker
              prefix-icon="el-icon-arrow-down"
              v-model="timeValue3"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="报警结束时间"
              end-placeholder="报警结束时间"
              style="width: 375px"
            >
            </el-date-picker>
          </div>
          <!-- <div class="searchBtn" @click="resetBtn">重 置</div> -->
          <div class="searchBtn" @click="searchBtn">查 询</div>
        </div>
      </div>

      <div class="tableBox">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="enterpriseName"
            label="企业名称"
            align="center"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="emergencySceneCode"
            label="应急场景"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="targetCode"
            label="指标名称"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="equipCode"
            label="设备名称"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="alarmGrade"
            label="报警等级"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div
                v-if="scope.row.alarmGrade == '一级'"
                style="color: #ff1d1d; font-weight: 500"
              >
                {{ scope.row.alarmGrade }}
              </div>
              <div
                v-if="scope.row.alarmGrade == '二级'"
                style="color: #ffa100; font-weight: 500"
              >
                {{ scope.row.alarmGrade }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="startAlarmtime"
            label="报警起始时间"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="endAlarmtime"
            label="报警结束时间"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="isDeal"
            label="是否已处置"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="alarmReason"
            label="报警原因"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="dealTime"
            label="处置时间"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="dealWay"
            label="操作"
            width="100px"
          >
            <template slot-scope="scope">
              <el-button
                style="
                  color: #269e8f;
                  font-weight: 500;
                  font-family: 思源黑体;
                  font-size: 14px;
                "
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="footerPage">
        <el-pagination
          :current-page.sync="searchObj.pageNum"
          :page-size.sync="searchObj.pageSize"
          :page-sizes="[10, 30, 50]"
          background
          layout="slot, sizes, prev, pager, next"
          :total="totalItemCount"
          @current-change="currentPage"
          @size-change="handleSizeChange"
        >
          <span class="totalNum" key="1">共 {{ totalItemCount }} 条数据</span>
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="1184px"
      :before-close="handleClose"
      :show-close="false"
      :append-to-body="true"
      custom-class="dialogCompany"
    >
      <div class="dialogTitle" slot="title">查看报警记录详情</div>
      <div class="dialogForm">
        <el-form
          ref="subAlarmData"
          :model="subAlarmData"
          label-width="200px"
          :inline="true"
        >
          <div class="formBox">
            <div class="formItem">
              <div class="left">
                <el-form-item label="企业名称">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="subAlarmData.enterpriseName"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="应急场景">
                  <el-select
                    v-model="subAlarmData.emergencySceneCode"
                    placeholder="请选择"
                    :disabled="seeForm"
                  >
                    <el-option
                      v-for="item in emergencySceneCodeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="指标名称">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="subAlarmData.targetCode"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="所属设备名称">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="subAlarmData.equipCode"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="报警等级">
                  <el-select
                    v-model="subAlarmData.alarmGrade"
                    placeholder="请选择"
                    :disabled="seeForm"
                  >
                    <el-option
                      v-for="item in emergencySceneCodeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="报警状态">
                  <el-select
                    v-model="subAlarmData.alarmStatus"
                    placeholder="请选择"
                    :disabled="seeForm"
                  >
                    <el-option
                      v-for="item in emergencySceneCodeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="报警起始时间">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="subAlarmData.startAlarmtime"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="报警结束时间">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="subAlarmData.endAlarmtime"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="处置人">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="subAlarmData.dealPersonName"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="是否已处置">
                  <el-select
                    v-model="subAlarmData.isDeal"
                    placeholder="请选择"
                    :disabled="seeForm"
                  >
                    <el-option
                      v-for="item in isDictList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="报警原因">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="subAlarmData.alarmReason"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="处置时间">
                  <el-select
                    v-model="subAlarmData.dealTime"
                    placeholder="请选择"
                    :disabled="seeForm"
                  >
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="处置措施">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="subAlarmData.dealWay"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <div @click="handleClose">返回</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dict, alarmDataInfoList, getAlarmData } from '@/api/alarmRecordStatics'
export default {
  name: 'alarmRecordStatics',
  props: {},
  components: {},
  data() {
    return {
      dialogVisible: false,
      routerMsg: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      value: '',
      timeValue1: ['', ''],
      timeValue2: ['', ''],
      timeValue3: ['', ''],
      searchObj: {
        // 页码 必传 默认1
        pageNum: 1,
        // 每页条数 必传 默认10
        pageSize: 10,
        // 报警起始时间
        startTimeBefore: '',
        // 企业名称
        enterpriseName: '',
        // 报警起始时间
        startTimeAfter: '',
        // 报警结束时间
        endTimeBefore: '',
        endTimeAfter: '',
        // 企业应急场景，SC001:钢铁企业；SC002:铝加工(深井铸造)企业；SC003:粉尘涉爆企业；SC004:矿山企业；SC005:危险化学品企业；SC006:有限空间企业
        emergencySceneCode: '',
        // 报警等级
        alarmGrade: '',
        // 指标名称
        targetCode: '',
        // 设备名称
        equipCode: '',
        // 报警原因
        alarmReason: '',
        // 处理开始时间
        dealStartTime: '',
        // 处理结束时间
        dealEndTime: '',
        // 是否处理
        isDeal: '',
      },
      tableData: [
        // {
        //   id: 5,
        //   enterpriseName: '浙江金麒实业有限公司',
        //   emergencySceneCode: '粉尘涉爆企业',
        //   alarmGrade: '一级',
        //   targetCode: '1',
        //   equipCode: '金麒实业除尘设备',
        //   startAlarmtime: '2024-06-13 10:37:08',
        //   alarmStatus: '已消警',
        //   endAlarmtime: '2024-06-14 10:37:12',
        //   isDeal: '未处理',
        //   alarmReason: '数据异常',
        //   dealTime: '2024-06-14 10:37:24',
        //   dealWay: '1',
        //   dealPersonName: '1'
        // },
        // {
        //   id: 8,
        //   enterpriseName: '浙江金麒实业有限公司',
        //   emergencySceneCode: '粉尘涉爆企业',
        //   alarmGrade: '二级',
        //   targetCode: '1',
        //   equipCode: '天诚家具除尘设备',
        //   startAlarmtime: '2024-06-14 10:37:08',
        //   alarmStatus: '已消警',
        //   endAlarmtime: '2024-06-14 10:37:12',
        //   isDeal: '未处理',
        //   alarmReason: '数据异常',
        //   dealTime: '2024-06-14 10:37:24',
        //   dealWay: '1',
        //   dealPersonName: '1'
        // }
      ],
      input: '',
      subAlarmData: {},
      seeForm: true,
      emergencySceneCodeList: [],
      levalDictList: [],
      isDictList: [],
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      totalItemCount: null,
    }
  },
  created() {
    this.routerMsg = this.$route.meta.title
    this.getAlarmDataInfoList(this.searchObj)
    this.getDict('emergency_scene_code')
    this.getLevalDict('alarm_grade_info')
    this.getIsDealDict('is_deal')
    // this.getAlarmData()
  },
  methods: {
    resetBtn() {
      this.searchObj = {
        pageNum: 1,
        pageSize: 10,
        startTimeBefore: '',
        enterpriseName: '',
        startTimeAfter: '',
        endTimeBefore: '',
        endTimeAfter: '',
        emergencySceneCode: '',
        alarmGrade: '',
        targetCode: '',
        equipCode: '',
        alarmReason: '',
        dealStartTime: '',
        dealEndTime: '',
        isDeal: '',
      }
      // this.getAlarmDataInfoList(this.searchObj)
    },
    searchBtn() {
      this.searchObj.emergencySceneCode = this.$refs.optionRef1.selected.value
      this.searchObj.alarmGrade = this.$refs.optionRef2.selected.value
      this.searchObj.isDeal = this.$refs.optionRef3.selected.value

      this.searchObj.dealStartTime = this.timeValue1[0]
      this.searchObj.dealEndTime = this.timeValue1[1]
      this.searchObj.startTimeBefore = this.timeValue2[0]
      this.searchObj.startTimeAfter = this.timeValue2[1]
      this.searchObj.endTimeBefore = this.timeValue3[0]
      this.searchObj.endTimeAfter = this.timeValue3[1]
      // console.log(this.searchObj)
      this.getAlarmDataInfoList(this.searchObj)
    },
    currentPage(pageNum) {
      console.log(pageNum)
      this.searchObj.pageNum = pageNum
      this.getAlarmDataInfoList(this.searchObj)
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.searchObj.pageSize = pageSize
      this.getAlarmDataInfoList(this.searchObj)
    },
    async handleEdit(index, row) {
      const res = await getAlarmData({ id: row.id })
      this.subAlarmData = res.data
      console.log('单条数据详情', this.subAlarmData)
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    async getAlarmDataInfoList(obj) {
      const res = await alarmDataInfoList(JSON.stringify(obj))
      this.tableData = res.data
      this.totalItemCount = res.total
      console.log(res)
    },
    // 应急场景
    async getDict(dictType) {
      const res = await dict({ dictType })
      this.emergencySceneCodeList = res.data
      console.log('应急场景', res)
    },
    // 报警等级
    async getLevalDict(dictType) {
      const res = await dict({ dictType })
      this.levalDictList = res.data
      console.log('报警等级', res)
    },
    // 是否已处置
    async getIsDealDict(dictType) {
      const res = await dict({ dictType })
      this.isDictList = res.data
      console.log('是否已处置', res)
    },
    async getAlarmData() {
      const res = await getAlarmData({ id: 5 })
      console.log('单条数据', res)
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.routerMsg {
  padding: 20px;
  color: #999999;
  font-size: 14px;
}
.mainBox {
  width: 100%;
}
.container {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;

  padding: 20px 25px;

  .searchBox {
    margin-bottom: 20px;
    .searchBoxTop {
      display: flex;
      margin-bottom: 20px;
      .search1 {
        margin-right: 15px;
      }
    }
    .searchBoxBottom {
      display: flex;

      .timeBlock {
        margin-right: 15px;
      }

      .searchBtn {
        margin-top: 3px;
        margin-left: 40px;
        width: 78px;
        height: 32px;
        border-radius: 3px;
        opacity: 1;
        box-sizing: border-box;
        border: 1px solid #269e8f;
        font-family: 思源黑体;
        font-size: 12px;
        font-weight: 500;
        line-height: 32px;
        text-align: center;
        color: #269e8f;
      }
      .searchBtn:hover {
        font-weight: 600;
        color: #269e8f;
        border: 2px solid #269e8f;
        cursor: pointer;
      }
    }
  }

  .footerPage {
    padding-top: 20px;
    text-align: right;
    padding-right: 30px;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2aa59e !important; // 进行修改选中项背景和字体
      color: #fff;
    }
    .totalNum {
      font-size: 14px;
      font-weight: normal;
      margin-right: 10px;
    }
  }
}
.dialogTitle {
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
  font-size: 20px;
  font-weight: 500;
  padding: 22px 0 19px 0;
  color: #303133;
}
.dialog-footer {
  margin-left: 530px;
  width: 98px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  background-color: #269e8f;
  border: 1px solid #269e8f;
  border-radius: 4px;
  cursor: pointer;
}

.dialogForm {
  .formBox {
    .formItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .left {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    .right {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    ::v-deep .el-input {
      height: 30px;
      width: 260px;
    }
    ::v-deep .el-input__inner {
      height: 30px;
    }
    ::v-deep .el-input__suffix {
      height: 40px;
    }
  }
}

::v-deep .dialogCompany {
  border-radius: 20px;
}
</style>
